<template>
  <header class="navbar">
    <i class="el-icon-menu nav-menu" @click="tapMenu"></i>
    <router-link class="nav-logo" to="/" @click="$emit('toggle-menu', false)"></router-link>
    <nav class="nav-links can-hide">
      <template v-for="(nav, index) in routes">
        <div :key="nav.name" v-if="nav.name !== 'Home'" :class="['nav-item', {show: index === activeIndex}]" @click="tapItem(index)">
        {{ nav.meta.title }}
        <div class="nav-item__childs">
          <router-link v-for="child in nav.children" :key="child.name" class="nav-item__child" :to="{name: child.name}" @click="$emit('hide-menu')">
            {{ child.meta.title }}
          </router-link>
        </div>
      </div>
      </template>
    </nav>
  </header>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { routes } from '@/router/index'
export default defineComponent({
  name: 'MainHeader',
  emits: {
    'toggle-menu': null
  },
  data () {
    return {
      routes,
      activeIndex: -1
    }
  },
  methods: {
    tapMenu () {
      this.$emit('toggle-menu')
    },
    tapItem (i: number) {
      this.activeIndex = i === this.activeIndex ? -1 : i
    }
  }
})
</script>
<style lang="scss">
.navbar {
    position: fixed;
    z-index: 20;
    top: 0;
    left: 0;
    right: 0;
    height: 34px;
    background-color: #fff;
    border-bottom: 1px solid #eaecef
}
.navbar {
  padding: 10px 20px;
  line-height: 34px;
  .nav-links {
    position: absolute;
    top: 10px;
    right: 20px;
  }
  .nav-item__childs {
    width: 140px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: #eaecef;
  }
}
.nav-menu {
  display: none;
  margin-right: 8px;
  margin-left: 5px;
  padding: 7px 10px;
  font-size: 20px;
}
.nav-logo{
  position: absolute;
  top: 10px;
  left: 50%;
  margin-left: -17px;
  width: 34px;
  height: 34px;
  background: url(../assets/logo.jpg) center center no-repeat;
  background-size: 50px 50px;
}
.nav-title {
  display: inline-block;
}

</style>
